<template>
    <div>
    <div class="block">
    <!-- <span class="demonstration" style="margin-left:8%">请选择年份</span>
    <el-date-picker
       ref="yearpick"
      :default-value="defaultyear"
      v-model="defaultyear"
      type="year"
      @change="refresh"
      value-format="yyyy"
      placeholder="选择年">
    </el-date-picker> -->

      <span class="demonstration" style="margin-left:8%">请选择日期</span>
    <el-date-picker
      ref="monthpick"
      type="month"
      v-model="defaultyear"
      @change="refresh"
      value-format=“yyyy-MM-dd”
      placeholder="选择月">
    </el-date-picker>

    <el-row>
  <el-col :span="12"><div class="grid-content bg-purple" style="margin-left:30%;margin-top:5%;">总体营利情况（本月）</div>

  </el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light" style="margin-left:30%;margin-top:5%;">总体营利状况（累计）</div></el-col>
</el-row>

  <el-row :gutter="15" >
 <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:5%;margin-top:5%;">
  <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{profits+'万元'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'利润总额'}}</span>
          <span >{{ '比上月 '+profitshb+'万元'}}</span>
          <i :class='[profitshb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : profitshb>0 ? 'green' : 'red'}"></i>
        </div>
         <div class="bottom clearfix">
          <span style="margin-left:98px">{{ '比上年 '+profitstb+'万元' }}</span>
          <i :class='[profitstb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : profitstb>0 ? 'green' : 'red'}"></i>
        </div>
       </div>
 </div></el-col>

 <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:5%;margin-top:5%;">
  <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{profitsrate+'%'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'利润率'}}</span>
          <span >{{ '比上月 '+profitsratehb+'%' }}</span>
          <i :class='[profitsratehb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : profitsratehb>0 ? 'green' : 'red'}"></i>
        </div>
         <div class="bottom clearfix">
          <span style="margin-left:81px">{{ '比年初 '+profitsratenc +'%'}}</span>
          <i :class='[profitsratenc>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : profitsratenc>0 ? 'green' : 'red'}"></i>
        </div>
       </div>
 </div></el-col>

<el-col :span="6"><div class="grid-content bg-purple" style="margin-left:5%;margin-top:5%;">
  <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{wholeprofits+'万元'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'利润总额'}}</span>
          <span >{{ '比上年 '+wholeprofitstb +'万元'}}</span>
          <i :class='[wholeprofitstb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : wholeprofitstb>0 ? 'green' : 'red'}"></i>
        </div>
         <!-- <div class="bottom clearfix">
          <span style="margin-left:98px">{{ '同比 '+chengbenhb +'%'}}</span>
          <i :class='[chengbenhb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : chengbenhb>0 ? 'green' : 'red'}"></i>
        </div> -->
       </div>
 </div></el-col>
<el-col :span="6"><div class="grid-content bg-purple" style="margin-left:5%;margin-top:5%;">
  <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{wholeprofitsrate+'%'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'利润率'}}</span>
          <span >{{ '比上年 '+wholeprofitsratetb+'%' }}</span>
          <i :class='[wholeprofitsratetb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : wholeprofitsratetb>0 ? 'green' : 'red'}"></i>
        </div>
         <!-- <div class="bottom clearfix">
          <span style="margin-left:98px">{{ '同比 '+chengbenhb +'%'}}</span>
          <i :class='[chengbenhb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : chengbenhb>0 ? 'green' : 'red'}"></i>
        </div> -->
       </div>
 </div></el-col>
</el-row>
</div>
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;">
    <div id="myChart"  style="width:100%;height:300px;margin-top:1%">
    </div></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;">
     <el-table
            :data="currentmsg"
            border
            style="width: 80%">
            <el-table-column
              prop="name"
              width="130"
              align="center"
              label="模块"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in datalist'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="130"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                      {{scope.row.list[i].number}}
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
    </div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;">
    <div id="myChart2"  style="width:100%;height:300px;margin-top:1%">
    </div></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;margin-top:20px;">
      <el-table
            :data="wholemsg"
            border
            style="width: 80%">
            <el-table-column
              prop="name"
              width="130"
              align="center"
              label="模块"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in datalist'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="130"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                      {{scope.row.list[i].number}}
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
    </div></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;">
    <div id="myChart3"  style="width:100%;height:300px;margin-top:1%">
    </div></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;">
     <el-table
            :data="ratemsg"
            border
            style="width: 80%">
            <el-table-column
              prop="name"
              width="130"
              align="center"
              label="模块"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in datalist1'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="130"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                      {{scope.row.list[i].number}}
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
    </div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;">
    <div id="myChart4"  style="width:100%;height:300px;margin-top:1%">
    </div></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:10px;margin-top:40px;">
      <el-table
            :data="wholeratemsg"
            border
            style="width: 80%">
            <el-table-column
              prop="name"
              width="130"
              align="center"
              label="模块"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in datalist1'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="130"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                      {{scope.row.list[i].number}}
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
    </div></el-col>
</el-row>
    </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'hello',
  data () {
    return {
    // 本月利润
      profits: 30,
      // 本月利润率
      profitsrate: 20,
      // 累计利润
      wholeprofits: 30,
      // 累计利润率
      wholeprofitsrate: 20,
      // 累计利润同比
      wholeprofitstb: 12.6,
      // 累计利润率同比
      wholeprofitsratetb: 30,
      // 本月利润环比
      profitshb: 12.6,
      // 本月利润同比
      profitstb: 30,
      // 本月利润率环比
      profitsratehb: 20,
      // 本月利润比年初
      profitsratenc: 12.6,
      // 默认年份
      defaultyear: '',
      // 当月利润表数据
      currentmsg: [
        {
          'name': '本月数',
          'list': [
            {
              'number': '111'
            }
          ]
        },
        {
          'name': '上月',
          'list': [
            {
              'number': '2222'
            }
          ]
        },
        {
          'name': '上年同期',
          'datelist': [
          ],
          'list': [
            {
              'number': '333'
            }
          ]
        },
        {
          'name': '环比增减量',
          'datelist': [
          ],
          'list': [
            {
              'number': '30'
            }
          ]
        },
        {
          'name': '同比增减量',
          'datelist': [
          ],
          'list': [
            {
              'number': '12'
            }
          ]
        }
      ],
      wholemsg: [
        {
          'name': '本年累计数',
          'list': [
            {
              'number': '111'
            }
          ]
        },
        {
          'name': '上年同期累计数',
          'list': [
            {
              'number': '2222'
            }
          ]
        },
        {
          'name': '同比增减量',
          'datelist': [
          ],
          'list': [
            {
              'number': '30'
            }
          ]
        },
        {
          'name': '同比增减率',
          'datelist': [
          ],
          'list': [
            {
              'number': '12'
            }
          ]
        }
      ],
      ratemsg: [
        {
          'name': '本月数',
          'list': [
            {
              'number': '111'
            }
          ]
        },
        {
          'name': '上月数',
          'list': [
            {
              'number': '2222'
            }
          ]
        },
        {
          'name': '上年同期数',
          'datelist': [
          ],
          'list': [
            {
              'number': '30'
            }
          ]
        },
        {
          'name': '环比增减量',
          'datelist': [
          ],
          'list': [
            {
              'number': '12'
            }
          ]
        },
        {
          'name': '同比增减量',
          'datelist': [
          ],
          'list': [
            {
              'number': '12'
            }
          ]
        }
      ],
      wholeratemsg: [
        {
          'name': '本年累计',
          'list': [
            {
              'number': '111'
            }
          ]
        },
        {
          'name': '上年累计',
          'list': [
            {
              'number': '2222'
            }
          ]
        },
        {
          'name': '同比增减量',
          'datelist': [
          ],
          'list': [
            {
              'number': '12'
            }
          ]
        }
      ],
      // 下方表格的横坐标值，日期值
      datalist: ['利润总额(万元)'],
      datalist1: ['利润率(%)'],
      // echarts的属性设置
      option1: {
        title: {
          text: '利润总额'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业成本']
        },
        xAxis: {
          data: ['本月数', '上月数', '上年同期数'],
          axisLabel: {interval: 0}
        },
        yAxis: {
          name: '金额/万元'
          // data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '营业收入',
          data: [4, 5, 4],
          type: 'bar',
          barWidth: 20, // 柱图宽度
          // stack:"数量",
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }]
      },
      option2: {
        title: {
          text: '利润总额(累计)'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业成本']
        },
        xAxis: {
          data: ['本年累计数', '上年同期数'],
          axisLabel: {interval: 0}
        },
        yAxis: {
          name: '金额/万元'
          // data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '营业收入',
          data: [4, 5, 4],
          type: 'bar',
          barWidth: 20, // 柱图宽度
          // stack:"数量",
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
        ]
      },
      option3: {
        title: {
          text: '利润率'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业成本']
        },
        xAxis: {
          data: ['本月数', '上月数', '上年同期数'],
          axisLabel: {interval: 0}
        },
        yAxis: {
          name: '百分比%'
          // data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '营业收入',
          data: [4, 5, 4],
          type: 'bar',
          barWidth: 20, // 柱图宽度
          // stack:"数量",
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
        ]
      },
      option4: {
        title: {
          text: '利润率'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业成本']
        },
        xAxis: {
          data: ['本年累计数', '上年累计数'],
          axisLabel: {interval: 0}
        },
        yAxis: {
          name: '百分比%'
          // data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '营业收入',
          data: [4, 5, 4],
          type: 'bar',
          barWidth: 20, // 柱图宽度
          // stack:"数量",
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
        ]
      }

    }
  },
  mounted () {
    // mounted--钩子函数，一来到该页面即执行，这里面让其执行init()函数。
    this.drawLine()
    this.init()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))

      let myChart3 = this.$echarts.init(document.getElementById('myChart3'))

      let myChart4 = this.$echarts.init(document.getElementById('myChart4'))

      // 绘制图表
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getChengbenForecharts',
        params: {
          'year': this.$refs.monthpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        // myChart.hideLoading();
        var Data2 = response.data
        console.log(Data2) // 请求成功返回的数据
        // this.option.xAxis.data=Data2[0];
        // this.option.series[0].data = Data2[1];
        // this.option.series[1].data = Data2[2];
        // myChart.setOption(this.option)

        console.log(Data2)
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
      // 给echarts设置数据
      // this.option1.series[0].data[0]= this.profits;
      // this.option1.series[0].data[1]= this.profits;
      // this.option1.series[0].data[2]= this.profits;
      myChart.setOption(this.option1)
      myChart2.setOption(this.option2)
      myChart3.setOption(this.option3)
      myChart4.setOption(this.option4)
    },
    // 初始化，请求后台产品销售等数据
    init () {
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))

      let myChart3 = this.$echarts.init(document.getElementById('myChart3'))

      let myChart4 = this.$echarts.init(document.getElementById('myChart4'))

      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getChengben',
        params: {
          'year': this.$refs.monthpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        // eslint-disable-next-line no-unused-vars
        var Data = response.data
        console.log(response.data) // 请求成功返回的数据
        // this.currentmsg = Data
        // this.datalist=Data[0].datelist
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getWholePercent',
        params: {
          'year': this.$refs.monthpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        var Data3 = response.data
        console.log(response.data) // 请求成功返回的数据
        this.profits = Data3[0].profits
        this.profitsrate = Data3[0].profitsrate
        this.profitshb = Data3[0].profitshb
        this.profitstb = Data3[0].profitstb
        this.profitsratehb = Data3[0].profitsratehb
        this.profitsratenc = Data3[0].profitsratenc

        this.wholeprofits = Data3[0].wholeprofits
        this.wholeprofitsrate = Data3[0].wholeprofitsrate
        this.wholeprofitstb = Data3[0].wholeprofitstb
        this.wholeprofitsratetb = Data3[0].wholeprofitsratetb

        // 左边第一个表格数据
        this.currentmsg[0].list[0].number = Data3[0].profits
        this.currentmsg[1].list[0].number = Data3[0].lastprofits
        this.currentmsg[2].list[0].number = Data3[0].lasyeartprofits
        this.currentmsg[3].list[0].number = Data3[0].profitshb
        this.currentmsg[4].list[0].number = Data3[0].profitstb

        // 右边第一个表格
        this.wholemsg[0].list[0].number = Data3[0].wholeprofits
        this.wholemsg[1].list[0].number = Data3[0].lastwholeprofits
        this.wholemsg[2].list[0].number = Data3[0].wholeprofitstb
        this.wholemsg[3].list[0].number = Data3[0].wholeprofitsratetbl + '%'

        // 左边第二个表格
        this.ratemsg[0].list[0].number = Data3[0].profitsrate
        this.ratemsg[1].list[0].number = Data3[0].lastprofitsrate
        this.ratemsg[2].list[0].number = Data3[0].lastyearprofitsrate
        this.ratemsg[3].list[0].number = Data3[0].profitsratehb
        this.ratemsg[4].list[0].number = Data3[0].profitsratetb

        // 右边第二个表格
        this.wholeratemsg[0].list[0].number = Data3[0].wholeprofitsrate
        this.wholeratemsg[1].list[0].number = Data3[0].lastwholeprofitsrate
        this.wholeratemsg[2].list[0].number = Data3[0].wholeprofitsratetb

        this.option1.series[0].data[0] = Data3[0].profits
        this.option1.series[0].data[1] = Data3[0].lastprofits
        this.option1.series[0].data[2] = Data3[0].lasyeartprofits

        this.option2.series[0].data[0] = Data3[0].wholeprofits
        this.option2.series[0].data[1] = Data3[0].lastwholeprofits

        this.option3.series[0].data[0] = Data3[0].profitsrate
        this.option3.series[0].data[1] = Data3[0].lastprofitsrate
        this.option3.series[0].data[2] = Data3[0].lastyearprofitsrate

        this.option4.series[0].data[0] = Data3[0].wholeprofitsrate
        this.option4.series[0].data[1] = Data3[0].lastwholeprofitsrate

        myChart.setOption(this.option1)
        myChart2.setOption(this.option2)
        myChart3.setOption(this.option3)
        myChart4.setOption(this.option4)
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
    },
    refresh () {
      this.drawLine()
      this.init()
    }
  }
}
</script>
